{% if en %}
    <div class="tab-pane fade show active" id="docker" role="tabpanel" aria-autocomplete="none">
        <h5>Common</h5>
        <small class="form-text text-muted">
            Common configurations for both standalone and grouped containers
        </small><br>
        {% for config, val in {
        "API URL": ("docker_api_url", "Docker API to connect to"),
        "Credentials": ("docker_credentials", "docker.io username and password, separated by ':'. useful for private images"),
        "Swarm Nodes": ("docker_swarm_nodes", "Will pick up one from it, You should set your node with label name=windows-* or name=linux-*. Separated by commas."),
    }.items() %}
            {% set value = get_config('whale:' + val[0]) %}
            <div class="form-group">
                <label for="{{ val[0].replace('_', '-') }}">
                    {{ config }}
                    <small class="form-text text-muted">{{ val[1] }}</small>
                </label>
                <input type="text" class="form-control"
                       id="{{ val[0].replace('_', '-') }}" name="{{ 'whale:' + val[0] }}"
                       {% if value != None %}value="{{ value }}"{% endif %}>
            </div>
        {% endfor %}
        {% set use_ssl = get_config('whale:docker_use_ssl') %}
        <div class="form-check">
            <input type="checkbox" id="docker-use-ssl" name="whale:docker_use_ssl"
                   {% if use_ssl == True %}checked{% endif %}>
            <label for="docker-use-ssl">Use SSL</label>
        </div>
        <div class="container" id="docker-ssl-config">
            <div class="form-group">
                <label for="docker-ssl-ca-cert">
                    SSL CA Certificate
                    <small class="form-text text-muted">
                        the location of the CA certificate file used in ssl connection
                    </small>
                </label>
                <input type="text" class="form-control"
                       id="docker-ssl-ca-cert" name="whale:docker_ssl_ca_cert"
                       value="{{ get_config('whale:docker_ssl_ca_cert') }}">
            </div>
            <div class="form-group">
                <label for="docker-ssl-client-cert">
                    SSL Client Certificate
                    <small class="form-text text-muted">
                        the location of the client certificate file used in ssl connection
                    </small>
                </label>
                <input type="text" class="form-control"
                       id="docker-ssl-client-cert" name="whale:docker_ssl_client_cert"
                       value="{{ get_config('whale:docker_ssl_client_cert') }}">
            </div>
            <div class="form-group">
                <label for="docker-ssl-client-key">
                    SSL Client Key
                    <small class="form-text text-muted">
                        the location of the client key file used in ssl connection
                    </small>
                </label>
                <input type="text" class="form-control"
                       id="docker-ssl-client-key" name="whale:docker_ssl_client_key"
                       value="{{ get_config('whale:docker_ssl_client_key') }}">
            </div>
        </div>
        <script>
            (function () {
                let config = document.getElementById('docker-ssl-config');
                let option = document.getElementById('docker-use-ssl');
                config.hidden = !option.checked;
                option.onclick = () => (config.hidden = !option.checked) || true;
            }) ()
        </script>
        <hr>
        <h5>Standalone Containers</h5>
        <small class="form-text text-muted">
            Typical challenges. Under most circumstances you only need to set these.
        </small><br>
        {% for config, val in {
        "Auto Connect Network": ("docker_auto_connect_network", "The network connected for single-containers. It's usually the same network as the frpc is in."),
        "Dns Setting": ("docker_dns", "Decide which dns will be used in container network."),
    }.items() %}
            {% set value = get_config('whale:' + val[0]) %}
            <div class="form-group">
                <label for="{{ val[0].replace('_', '-') }}">
                    {{ config }}
                    <small class="form-text text-muted">
                        {{ val[1] }}
                    </small>
                </label>
                <input type="text" class="form-control"
                       id="{{ val[0].replace('_', '-') }}" name="{{ 'whale:' + val[0] }}"
                       {% if value != None %}value="{{ value }}"{% endif %}>
            </div>
        {% endfor %}
        <hr>
        <h5>Grouped Containers</h5>
        <small class="form-text text-muted">
            Designed for multi-container challenges
        </small><br>
        {% for config, val in {
        "Auto Connect Containers": ("docker_auto_connect_containers","Decide which container will be connected to multi-container-network automatically. Separated by commas."),
        "Multi-Container Network Subnet": ("docker_subnet", "Subnet which will be used by auto created networks for multi-container challenges."),
        "Multi-Container Network Subnet New Prefix": ("docker_subnet_new_prefix", "Prefix for auto created network.")
    }.items() %}
            {% set value = get_config('whale:' + val[0]) %}
            <div class="form-group">
                <label for="{{ val[0].replace('_', '-') }}">
                    {{ config }}
                    <small class="form-text text-muted">
                        {{ val[1] }}
                    </small>
                </label>
                <input type="text" class="form-control"
                       id="{{ val[0].replace('_', '-') }}" name="{{ 'whale:' + val[0] }}"
                       {% if value != None %}value="{{ value }}"{% endif %}>
            </div>
        {% endfor %}

        <div class="submit-row float-right">
            <button type="submit" tabindex="0" class="btn btn-md btn-primary btn-outlined">
                Submit
            </button>
        </div>
    </div>
{% else %}
    <div class="tab-pane fade show active" id="docker" role="tabpanel" aria-autocomplete="none">
        <h5>常规</h5>
        <small class="form-text text-muted">
            独立容器和分组容器的通用配置
        </small><br>
        {% for config, val in {
        "API网址": ("docker_api_url", "要连接的 Docker API"),
        "认证信息": ("docker_credentials", "docker.io 用户名和密码，以:分隔。 如需使用私人镜像需要填写此项"),
        "集群节点": ("docker_swarm_nodes", "将从中选择一个节点部署镜像，您应该使用标签 name=windows-* 或 name=linux-* 设置节点。用逗号分隔。"),
    }.items() %}
            {% set value = get_config('whale:' + val[0]) %}
            <div class="form-group">
                <label for="{{ val[0].replace('_', '-') }}">
                    {{ config }}
                    <small class="form-text text-muted">{{ val[1] }}</small>
                </label>
                <input type="text" class="form-control"
                       id="{{ val[0].replace('_', '-') }}" name="{{ 'whale:' + val[0] }}"
                       {% if value != None %}value="{{ value }}"{% endif %}>
            </div>
        {% endfor %}
        {% set use_ssl = get_config('whale:docker_use_ssl') %}
        <div class="form-check">
            <input type="checkbox" id="docker-use-ssl" name="whale:docker_use_ssl"
                   {% if use_ssl == True %}checked{% endif %}>
            <label for="docker-use-ssl">使用SSL</label>
        </div>
        <div class="container" id="docker-ssl-config">
            <div class="form-group">
                <label for="docker-ssl-ca-cert">
                    SSL CA证书
                    <small class="form-text text-muted">
                        ssl 连接中使用的 CA 证书文件的位置
                    </small>
                </label>
                <input type="text" class="form-control"
                       id="docker-ssl-ca-cert" name="whale:docker_ssl_ca_cert"
                       value="{{ get_config('whale:docker_ssl_ca_cert') }}">
            </div>
            <div class="form-group">
                <label for="docker-ssl-client-cert">
                    SSL 客户端证书
                    <small class="form-text text-muted">
                        ssl 连接中使用的客户端证书文件的位置
                    </small>
                </label>
                <input type="text" class="form-control"
                       id="docker-ssl-client-cert" name="whale:docker_ssl_client_cert"
                       value="{{ get_config('whale:docker_ssl_client_cert') }}">
            </div>
            <div class="form-group">
                <label for="docker-ssl-client-key">
                    SSL 客户端密钥
                    <small class="form-text text-muted">
                        ssl 连接中使用的客户端密钥文件的位置
                    </small>
                </label>
                <input type="text" class="form-control"
                       id="docker-ssl-client-key" name="whale:docker_ssl_client_key"
                       value="{{ get_config('whale:docker_ssl_client_key') }}">
            </div>
        </div>
        <script>
            (function () {
                let config = document.getElementById('docker-ssl-config');
                let option = document.getElementById('docker-use-ssl');
                config.hidden = !option.checked;
                option.onclick = () => (config.hidden = !option.checked) || true;
            }) ()
        </script>
        <hr>
        <h5>独立容器</h5>
        <small class="form-text text-muted">
            典型的题目类型。 大多数情况下你只需要设置这些。
        </small><br>
        {% for config, val in {
        "自动连接网络": ("docker_auto_connect_network", "为单容器连接的网络。 它通常与 frpc 所在的网络相同。"),
        "DNS设置": ("docker_dns", "决定容器网络中使用哪个 dns。"),
    }.items() %}
            {% set value = get_config('whale:' + val[0]) %}
            <div class="form-group">
                <label for="{{ val[0].replace('_', '-') }}">
                    {{ config }}
                    <small class="form-text text-muted">
                        {{ val[1] }}
                    </small>
                </label>
                <input type="text" class="form-control"
                       id="{{ val[0].replace('_', '-') }}" name="{{ 'whale:' + val[0] }}"
                       {% if value != None %}value="{{ value }}"{% endif %}>
            </div>
        {% endfor %}
        <hr>
        <h5>分组容器</h5>
        <small class="form-text text-muted">
            专为应对多容器题目而设计
        </small><br>
        {% for config, val in {
        "自动连接容器": ("docker_auto_connect_containers","自动决定哪个容器将连接到多容器网络。用逗号分隔。"),
        "多容器网络子网": ("docker_subnet", "自动创建的网络将使用该子网来应对多容器题目。"),
        "多容器网络子网新前缀": ("docker_subnet_new_prefix", "自动创建的网络的前缀。")
    }.items() %}
            {% set value = get_config('whale:' + val[0]) %}
            <div class="form-group">
                <label for="{{ val[0].replace('_', '-') }}">
                    {{ config }}
                    <small class="form-text text-muted">
                        {{ val[1] }}
                    </small>
                </label>
                <input type="text" class="form-control"
                       id="{{ val[0].replace('_', '-') }}" name="{{ 'whale:' + val[0] }}"
                       {% if value != None %}value="{{ value }}"{% endif %}>
            </div>
        {% endfor %}

        <div class="submit-row float-right">
            <button type="submit" tabindex="0" class="btn btn-md btn-primary btn-outlined">
                确定
            </button>
        </div>
    </div>
{% endif %}
